<template>
	<div class="settings">
		<div class="sz_one">
			<van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
		</div>
		<div class="sz_two">
			<div class="two_buju" @click="toPersonal">
				<div class="buju">
					<span style="font-size: 18px">个人信息</span>
					<span style="font-size: 12px;color: #999999">头像、昵称、收货地址</span>
				</div>
				<van-icon name="arrow" />
			</div>
			<div class="two_buju">
				<div class="buju">
					<span style="font-size: 18px">账号与安全</span>
					<span style="font-size: 12px;color: #999999">修改密码、修改手机号码、账号绑定管理</span>
				</div>
				<van-icon name="arrow" />
			</div>
		</div>
		<div class="sz_three">
			<div class="two_buju">
				<div class="buju">
					<span style="font-size: 18px">长辈版<van-tag round type="danger">新功能</van-tag></span>
					<span style="font-size: 12px;color: #999999">字大看得清,流程更简单</span>
				</div>
				<div>
					<span style="color:#999999;">未开启</span>
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<div class="sz_four">
			<div><span>支付设置</span>
				<van-icon name="arrow" />
			</div>
			<div><span>消息通知设置</span>
				<van-icon name="arrow" />
			</div>
			<div><span>隐私管理</span>
				<van-icon name="arrow" />
			</div>
			<div><span>通用</span>
				<van-icon name="arrow" />
			</div>
			<div><span>诊断工具</span>
				<van-icon name="arrow" />
			</div>
		</div>
		<div class="sz_four">
			<div><span>个人信息收集清单</span>
				<van-icon name="arrow" />
			</div>
			<div><span>第三方信息数据共享</span>
				<van-icon name="arrow" />
			</div>
			<div><span>关于吃了么</span>
				<van-icon name="arrow" />
			</div>
		</div>
		<div class="sz_five">
			<van-button @click="logout()" class="logout" color="#ffd101" round size="large">退出账号</van-button>
		</div>
	</div>
</template>
<script>
	import storage from '../utils/localstorage.js'
	export default {
		setup() {
			const onClickLeft = () => history.back();
			return {
				onClickLeft,
			};
		},
		data() {
			return {

			}
		},
		mounted() {
			this.getInfo();
		},
		methods: {
      toPersonal(){
        this.$router.push('/personal');
      },
			getInfo() {
				//调用接口让过滤器拦截页面
				this.$axios.get('/dishes/test')
					.then(res => {
						console.log(res);
					})
			},
			logout() {
				console.log("退出账号");
				storage.remove("userId")
				storage.remove("token")
				this.$router.replace('/login')
			}
		}


	};
</script>
<style scoped>
	.settings {
		background: #f4f4f4;
		height: 100%;
	}

	.sz_one {
		margin-top: 15px;
	}

	.sz_two {
		padding: 0 15px 0 15px;
		background: white;
		margin: 10px 0 10px 0;
	}

	.two_buju {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0 10px 0;
	}

	.buju {
		display: flex;
		flex-direction: column;
	}

	.sz_three {
		padding: 0 15px 0 15px;
		background: white;
		margin: 10px 0 10px 0;
	}

	.sz_four {
		padding: 0 15px 0 15px;
		background: white;
		margin: 10px 0 10px 0;
	}

	.sz_four div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0 10px 0;
	}

	.sz_five {
		margin: 50px 15px 0 15px;
		padding-bottom: 210px;
	}

	.logout {
		--van-button-default-color: var(--van-text-color)
	}
</style>
